<!--
 * @Author: ZhaoZhiqi
 * @Date: 2022-08-29 17:27:26
 * @LastEditors: ZhaoZhiqi
 * @LastEditTime: 2022-09-26 09:52:58
 * @Description: 文章详情
 * @FilePath: \tuanfeng-mini\src\pages\article_detail.vue
-->
<template>
    <div class="container">
        <div class="title">{{info.title}}</div>
        <div class="desc">
            <div class="module">{{info.artTypeName}}</div>
            <div class="time">{{info.createDate}}</div>
        </div>
        <u-parse :html="info.content" :tag-style="style"></u-parse>
    </div>
</template>
<script>
import { getArticleDetailAPI } from "../api/article";
import { mapState } from "vuex";
import { collectAPI } from "../api/collection";

export default {
    data() {
        return {
            id: "",
            info: {},
            loading: false,
            style: {
                p: "margin-bottom: 10px; line-height: 1.5",
            },
        };
    },
    computed: {
        ...mapState(["openId"]),
    },
    onShareAppMessage(){},
    onLoad(options) {
        let { id, title, from } = options;
        this.id = id;
        if (title) wx.setNavigationBarTitle({ title });

        wx.showLoading({
            title: "加载中...",
        });
        this.loading = true;
        getArticleDetailAPI({ id }).then((res) => {
            this.info = res.data;
            this.loading = false;
            wx.hideLoading();

            // 新增浏览记录
            if (this.openId && !from) {
                collectAPI({
                    openId: this.openId,
                    pid: id,
                    type: 0,
                    name: this.info.title,
                    path: 'pages/article_detail',
                    param: {
                        title
                    }
                }).then((res) => {});
            }
        });
    },
};
</script>
<style scoped lang="scss">
@import "../assets/scss/common.scss";

.container {
    padding: 15px;
    .title {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 20px;
    }
    .desc {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        margin-bottom: 20px;
        color: $color_secondary-text;
    }
    .collect {
        font-size: 14px;
        margin-bottom: 20px;
        text-align: right;
        color: #023884;
    }
    .content {
        img {
            width: 100%;
        }
    }
}
</style>